<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>非单文件组件</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			Vue中使用组件的三大步骤：
					大前提：必须有一个vm
					一、定义组件（创建组件）。
					二、注册组件。
					三、编写组件标签。

			一、定义组件：
							1.如何定义一个Vue的组件？—— 使用Vue.extend(options)去定义。
							2.School的本质是一个构造函数，我们以后去写<School/>，Vue底层代码帮我们去new这个School。
							3.Vue.extend(options)中的options是配置对象，它和new Vue(options)中的options几乎一样，
								不过也有区别，区别如下：
											(1).不能写el去指定容器了
															原因：所有组件的实例最终要被一个vm所管理，由vm中的el属性决定服务哪个容器。
											(2).data必须写成函数
															原因：为了确保多个组件实例中的数据互不干扰
											(3).组件的结构，要配置在template属性中:
															1.template的值为html字符串。
															2.template结构必须只有一个跟标签。
			二、注册组件：
							1.局部注册：在编写配置对象的时候传入配置项：
											components:{ //注册组件
												School
											}
							2.全局注册：Vue.component('Hello',Hello)

			三、编写组件标签：
							<School></School> --- 推荐
							<school></school>
							<school/>
							<School/> ---- 推荐（但在非单文件中这样写，会造成后续组件标签失效）
		-->

		<!-- 准备好一个容器-->
		<div id="root">
			<School></School>
			<Hello></Hello>
		</div>

		<div id="root2">
			<Hello></Hello>
		</div>

		<script type="text/javascript" >
			//定义School组件
			const School = Vue.extend({
				data(){
					return {
						school:'尚硅谷',
						address:'北七家镇·宏福科技园',
						url:'http://www.atguigu.com'
					}
				},
				template:`
						<div>
							<h1>学校名称：{{school}}</h1>
							<h1>学校地址：{{address}}</h1>
							<h1>学校网址：<a :href="url">点我去官网看看</a></h1>	
						</div>
				`
			})

			//定义Hello组件
			const Hello = Vue.extend({
				template:'<h1>Hello!</h1>'
			})
			
			//全局注册Hello组件
			Vue.component('Hello',Hello)

			//创一个vm
			new Vue({
				el:'#root',
				components:{ //局部注册School组件
					School
				}
			})

			new Vue({
				el:'#root2',
			})
		</script>
	</body>
</html>